<style lang="less">
@import "./main.less";
.card_style {
  height: 40px;
  display: flex;
  align-items: center;
}
</style>
<template>
  <div class="main">
    <div
      class="sidebar-menu-con"
      :style="{
        width: '200px',
        overflow: 'auto',
      }"
    >
      <div class="logo"></div>
      <Menu
        theme="light"
        style="width: 210px"
        accordion
        @on-open-change="MenuChange"
        @on-select="itemChange"
      >
        <Submenu
          :name="item.value"
          v-for="(item, index) in menuList"
          :key="index"
        >
          <template slot="title">
            <Icon type="ios-paper" />
            {{ item.title }}
          </template>
          <div
            v-for="(item_contetn, index_chid) in item.children"
            :key="'ch' + index_chid"
          >
            <MenuGroup
              v-if="!!item_contetn.children"
              :title="item_contetn.title"
            >
              <MenuItem
                :name="`{&quot;typeo&quot;:&quot;${item_contetn.value}&quot;,&quot;typeoTitle&quot;:&quot;${item_contetn.title}&quot;,&quot;typet&quot;:&quot;${last_item.value}&quot;,&quot;typetTitle&quot;:&quot;${last_item.title}&quot;}`"
                v-for="(last_item, Lindex) in item_contetn.children"
                :key="Lindex + 'last'"
              >
                {{ last_item.title }}
              </MenuItem>
            </MenuGroup>
            <MenuItem
              v-else
              :name="`{&quot;typeo&quot;:&quot;${item_contetn.value}&quot;,&quot;typeoTitle&quot;:&quot;${item_contetn.title}&quot;}`"
              >{{ item_contetn.title }}</MenuItem
            >
          </div>
        </Submenu>
      </Menu>
    </div>
    <div class="main-header-con" :style="{ paddingLeft: '200px' }">
      <div class="main-header">
        <div class="header-middle-con">
          <div class="main-breadcrumb">
            <!-- <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav> -->
          </div>
        </div>

        <!-- 头部右侧内容 -->
        <div class="header-avator-con">
          <!-- <full-screen
            v-model="isFullScreen"
            @on-change="fullscreenChange"
            style=""
          ></full-screen> -->
          <!-- <lock-screen></lock-screen> -->
          <!-- 消息模块 -->
          <!-- <message-tip v-model="mesCount"></message-tip> -->
          <div class="user-dropdown-menu-con">
            <Row
              type="flex"
              justify="end"
              align="middle"
              class="user-dropdown-innercon"
            >
              <!-- 个人中心模块 -->
              <Dropdown
                v-if="false"
                transfer
                trigger="click"
                @on-click="handleClickUserDropdown"
                placement="bottom-end"
              >
                <a href="javascript:void(0)">
                  <div class="main-user-name">
                    <div>
                      <div>{{ userName }}</div>
                      <div>{{ departmentName }}</div>
                    </div>
                    <div>
                      <Icon
                        type="ios-arrow-down"
                        style="margin-left: 10px"
                      ></Icon>
                    </div>
                  </div>
                </a>
                <DropdownMenu slot="list">
                  <!-- divided -->
                  <DropdownItem name="ownSpace">个人中心</DropdownItem>
                  <DropdownItem name="loginout">退出登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <!-- <Avatar :src="avatorPath" style="background: #619fe7;margin-left: 10px;"></Avatar> -->
            </Row>
          </div>
        </div>
      </div>
      <!-- <div class="tags-con">
        <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
      </div> -->
    </div>
    <div class="single-page-con" :style="{ left: '200px' }">
      <div class="single-page">
        <!-- <keep-alive :include="cachePage"> -->
        <!-- <router-view></router-view> -->
        <!-- </keep-alive> -->
        <div>
          <Card>
            <div slot="title" class="card_style">
              <Breadcrumb separator=">">
                <BreadcrumbItem v-if="currentTypeoText">{{
                  currentTypeoText
                }}</BreadcrumbItem>
                <BreadcrumbItem v-if="currentTypetTitle">{{
                  currentTypetTitle
                }}</BreadcrumbItem>
              </Breadcrumb>
            </div>
            <div slot="extra">
              <Button
                style="margin-right: 10px"
                icon="md-add"
                type="primary"
                :disabled="!currentTypeo"
                @click="addModdel"
                >添加</Button
              >
              <Button
                icon="md-refresh"
                :disabled="!currentTypeo"
                @click="getExampleList"
                >刷新</Button
              >
              <!-- <Button icon="md-arrow-round-back" @click="$router.go(-1)">返回</Button> -->
            </div>
            <!-- <Row style="margin-bottom: 20px" type="flex" justify="space-between" :gutter="16">
          <Col>
          <Row :gutter="16" type="flex">
            <Col>
            <Input v-model="search.Name" placeholder="请输入名称" clearable></Input>
            </Col>
            <Col>
            <Input v-model="search.Code" placeholder="请输入编码" clearable></Input>
            </Col>
            <Col>
            <Button icon="md-search" type="primary" @click="savesearch">筛选</Button>
            <Button @click="clearSearch" style="margin-left: 10px">查看全部</Button>
            </Col>
          </Row>
          </Col>
        </Row> -->
            <Table
              stripe
              border
              :disabled-hover="false"
              :data="exampleObj.list"
              :loading="exampleObj.loading"
              :columns="exampleObj.columns"
              ref="exampleList"
            >
              <template slot-scope="{ row }" slot="FCN">
                <Button
                  type="warning"
                  @click="getExample(row)"
                  style="margin: 5px"
                  >修改</Button
                >
                <Poptip
                  transfer
                  confirm
                  title="确定要删除吗?"
                  @on-ok="delitem(row)"
                >
                  <Button style="margin: 5px" type="error">删除</Button>
                </Poptip>
              </template>
            </Table>
            <div style="text-align: center; margin-top: 20px">
              <Page
                :total="exampleObj.count"
                :page-size="exampleObj.pageSize"
                show-total
                :current.sync="exampleObj.current"
                @on-change="pageChange"
                @on-page-size-change="pageSizeChange"
                show-sizer
              ></Page>
            </div>
          </Card>
          <!-- 内容模块 -->
          <Modal
            v-model="exampleModal"
            :title="exampleObj.title"
            width="1455"
            :mask-closable="true"
            :closable="true"
          >
            <Form
              :model="exampleForm"
              :label-width="120"
              ref="exampleForm"
              :rules="ruleValidate"
            >
              <Row :gutter="16" type="flex">
                <Col :span="12">
                  <FormItem label="一级类型" prop="">
                    <Input readonly v-model="articleTypeText"></Input>
                  </FormItem>
                </Col>
                <Col :span="12">
                  <FormItem label="二级类型" prop="">
                    <Input readonly v-model="currentTypeoText"></Input>
                  </FormItem>
                </Col>
                <Col :span="12" v-if="currentTypetTitle">
                  <FormItem label="三级类型" prop="typet">
                    <Input readonly v-model="currentTypetTitle"></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row :gutter="16" type="flex">
                <Col :span="24">
                  <FormItem label="标题" prop="">
                    <Input v-model="exampleForm.title"></Input>
                  </FormItem>
                </Col>
              </Row>
              <Row :gutter="16" type="flex">
                <Col :span="24">
                  <FormItem label="内容" prop="">
                    <editor
                      style="height: 60vh"
                      ref="myQuillEditor"
                      :content="exampleForm.content"
                      @quillChange="quillChange"
                    ></editor>
                  </FormItem>
                </Col>
              </Row>
            </Form>
            <div slot="footer">
              <Button type="warning" @click="saveExample" v-if="exampleForm.id"
                >保存</Button
              >
              <Button type="primary" @click="addExample" v-else>添加</Button>
              <Button @click="exampleModal = false">取消</Button>
            </div>
          </Modal>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import editor from "../components/editor.vue";
let exampleForm = {
  // articleType: "", //一级类型
  // typeo: "", //二级类型
  // typet: "", //三级类型
  title: "", //标题
  content: "", //内容
};
export default {
  components: {
    editor,
    // messageTip,
  },
  data() {
    return {
      shrink: true,
      menuList: [],
      userName: "",
      departmentName: "",
      currentTypeoText: "",
      currentTypetTitle: "",
      currentTypeo: "",
      articleTypeText: "",
      exampleObj: {},
      exampleModal: false,
      exampleForm: {},
      exampleObj: {
        list: [],
        columns: [
          // {
          //   type: "selection",
          //   width: 60,
          //   align: "center"
          // },
          {
            type: "index",
            title: "#",
            width: 60,
          },
          // {
          //   title: "一级类型",
          //   key: "articleType",
          // },
          // {
          //   title: "二级类型",
          //   key: "typeo",
          // },
          // {
          //   title: "三级类型",
          //   key: "typet",
          // },
          {
            title: "标题",
            key: "title",
          },
          //   {
          //     title: "状态",
          //     key: "status",
          //     render: (h, params) => {
          //       return h(
          //         "span",
          //         params.row.status == 0
          //           ? "正常"
          //           : params.row.status == 1
          //             ? "停用"
          //             : params.row.status == 2
          //               ? "删除"
          //               : ""
          //       );
          //     },
          //   },
          // {
          //   title: "手机",
          //   key: "mobile",
          //   render: (h, params) => {
          //     return h("span", params.row.mobile[0]);
          //   }
          // },
          {
            title: "操作",
            slot: "FCN",
            width: 180,
            // render: (h, params) => {
            //   return h("div", [
            //     h(
            //       "Button", {
            //         props: {
            //           type: "primary"
            //         },
            //         style: {
            //           margin: "5px"
            //         },
            //         on: {
            //           click: () => {
            //             this.getExample(params.row.id);
            //           }
            //         }
            //       },
            //       "查看"
            //     ),
            //  h(
            //   "Poptip",
            //   {
            //     props: {
            //       confirm: true,
            //       title: "您确认删除该信息？",
            //       transfer: true
            //     },
            //     on: {
            //       "on-ok": () => {
            //         this.delExample(params.row.ID);
            //       }
            //     }
            //   },
            //   [
            //     h(
            //       "Button",
            //       {
            //         props: {
            //           type: "error",
            //           size: "small"
            //         }
            //       },
            //       "删除"
            //     )
            //   ]
            // )
            // ]);
            // }
          },
        ],
        title: "",
        current: 1,
        count: 0,
        loading: false,
        pageSize: 10,
      },
      ruleValidate: {
        articleType: [
          {
            required: true,
            message: "内容不能空",
            trigger: "blur",
            // type: "number"
          },
          // {
          //   message: "必须是数字形式",
          //   trigger: "blur",
          //   type: "number"
          // }
        ],
        typeo: [
          {
            required: true,
            message: "编号不能空",
            trigger: "blur",
            // type: "number"
          },
          // {
          //   message: "必须是数字形式",
          //   trigger: "blur",
          //   type: "number"
          // }
        ],
      },
    };
  },
  computed: {},
  methods: {
    saveExample() {
      this.$refs["exampleForm"].validate((valid) => {
        if (valid) {
          let temp = this.exampleForm;
          temp.articleType = this.currentArticleType;
          temp.typeo = this.currentTypeo;
          temp.typet = this.currentTypet;
          if (!this.currentTypet) {
            delete temp.typet;
          }
          console.log("temp", temp);
          axios
            .post(`/textcontent/update`, temp)
            .then((res) => {
              this.$Message.success("操作成功");
              this.exampleModal = false;
              this.getExampleList();
            })
            .catch((err) => {});
        }
      });
    },
    addExample() {
      this.$refs["exampleForm"].validate((valid) => {
        let temp = this.exampleForm;
        temp.articleType = this.currentArticleType;
        temp.typeo = this.currentTypeo;
        temp.typet = this.currentTypet;
        if (!this.currentTypet) {
          delete temp.typet;
        }
        console.log("temp", temp);
        axios
          .post(`/textcontent/add`, temp)
          .then((res) => {
            this.$Message.success("操作成功");
            this.exampleModal = false;
            this.getExampleList();
          })
          .catch((err) => {});
      });
    },
    getExample(res) {
      //   axios.get(`/hlapi/SysDictType/GetDictType?id=${id}`).then((content) => {
      this.exampleObj.title = "修改配置";
      this.exampleForm = res;
      // this.contentText = res.content;
      this.exampleModal = true;
      //   });
    },
    quillChange(txt) {
      // this.contentText = txt;
      this.exampleForm.content = txt;
    },
    addModdel() {
      this.exampleObj.title = "添加";
      this.contentText = "";
      this.exampleForm = Object.assign({}, exampleForm);
      this.exampleModal = true;
    },
    getExampleList() {
      this.exampleObj.loading = true;
      let data = {
        articleType: this.currentArticleType,
        typeo: this.currentTypeo,
        typet: this.currentTypet,
        pageNum: this.exampleObj.current,
        pageSize: this.exampleObj.pageSize,
      };
      if (!this.currentTypet) {
        delete data.typet;
      }
      axios.post(`/textcontent/search`, data).then((res) => {
        console.log("获取", res);
        let { code, message, result } = res;
        if (code == "ok") {
          this.exampleObj.list = result.data;
          this.exampleObj.count = result.total;
        } else {
          this.exampleObj.list = [];
          this.exampleObj.count = 0;
        }
        this.exampleObj.loading = false;
      });
    },
    delitem(res) {
      axios
        .post(`/textcontent/delete`, {
          id: res.id,
        })
        .then((res) => {
          this.$Message.success("删除成功");
          this.getExampleList();
        })
        .catch((err) => {});
    },
    MenuChange(item) {
      console.log("打开层级", item);
      if (item.length > 0) {
        let index = item[0];
        this.currentArry = this.menuList[index];
        this.currentArticleType = index;
        this.articleTypeText = this.currentArry.title;
      } else {
        this.currentArry = [];
        this.currentArticleType = "";
        this.articleTypeText = "";
      }
    },
    itemChange(item) {
      console.log("点击", JSON.parse(item));
      let data = JSON.parse(item);
      this.exampleObj.current = 1;
      this.currentTypeo = data.typeo;
      this.currentTypeoText = data.typeoTitle;
      if (data.typet) {
        this.currentTypet = data.typet;
        this.currentTypetTitle = data.typetTitle;
      } else {
        this.currentTypet = "";
        this.currentTypetTitle = "";
      }
      this.getExampleList();
    },
    pageChange(v) {
      this.exampleObj.current = v;
      this.getExampleList();
    },
    pageSizeChange(v) {
      this.exampleObj.pageSize = v;
      this.getExampleList();
    },
    init() {
      //   let pathArr = util.setCurrentPath(this, this.$route.name);
      //   this.$store.commit("app/updateMenulist");
      //   if (pathArr.length >= 2) {
      //     this.$store.commit("app/addOpenSubmenu", pathArr[1].name);
      //   }
      this.userName = JSON.parse(sessionStorage.getItem("userdata")).name;
      this.departmentName = JSON.parse(
        sessionStorage.getItem("userdata")
      ).departmentName;
      // {"id":"1","username":"管理员","departmentName":"区市场监管局（知识产权局）","isAdmin":true}
      let messageCount = 3;
      this.messageCount = messageCount.toString();
      this.checkTag(this.$route.name);
      this.$store.commit("app/setMessageCount", 3);
    },
    toggleClick() {
      return;
      this.shrink = !this.shrink;
    },
    handleClickUserDropdown(name) {
      if (name === "ownSpace") {
        util.openNewPage(this, "ownspace_index");
        this.$router.push({
          name: "ownspace_index",
        });
      } else if (name === "loginout") {
        // 退出登录
        localStorage.clear();
        sessionStorage.clear();
        Cookies.remove("locking");
        this.$router.replace({
          name: "login",
        });
        // axios.post("/hlapi/Auth/Logout").then((res) => {
        //   localStorage.clear();
        //   sessionStorage.clear();
        //   Cookies.remove("locking");
        //   this.$router.replace({
        //     name: "login",
        //   });
        // });
      }
    },
    checkTag(name) {
      let openpageHasTag = this.pageTagsList.some((item) => {
        if (item.name === name) {
          return true;
        }
      });
      if (!openpageHasTag) {
        //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
        util.openNewPage(
          this,
          name,
          this.$route.params || {},
          this.$route.query || {}
        );
      }
    },
    handleSubmenuChange(val) {},
    beforePush(name) {
      // if (name === 'accesstest_index') {
      //     return false;
      // } else {
      //     return true;
      // }
      return true;
    },
    fullscreenChange(isFullScreen) {},
    menuListInit() {
      axios
        .post(`/type/typeTree `)
        .then((res) => {
          console.log("res", res);
          this.menuList = res.result;
        })
        .catch((err) => {});
      // const tempArr = JSON.parse(sessionStorage.getItem("canRouterList"));
      // const tempArr2 = JSON.parse(
      //   JSON.stringify(this.$store.state.app.menuList)
      // );
      // this.menuList = util.menuListOp(tempArr2, tempArr);
      // this.menuList=this.$store.state.app.menuList
    },
  },
  watch: {},
  mounted() {
    this.menuListInit();
  },
  created() {},
};
</script>
